<template>
  <el-container>
    <el-main>
      <div class="mask" v-if="showVideo"></div>
      <!-- <VideoViewer :src="videoUrl" v-if="dialogPlay" v-on:closeVideo="closeDialog" /> -->
      <el-button
          class="close-video"
          v-if="showVideo"
          @click.native.stop="closeVideo()"
          type="text"
          size="small"
      >
        <svg
            t="1622304930150"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4874"
            width="25"
            height="25"
        >
          <path
              d="M525.269211 510.837524 918.101111 116.227118c7.17747-7.209192 7.14984-18.871813-0.059352-26.049283-7.210215-7.176446-18.87079-7.151887-26.049283 0.059352L499.278257 484.72889 106.563014 90.236164c-7.17747-7.209192-18.84009-7.235798-26.049283-0.059352-7.209192 7.17747-7.235798 18.84009-0.059352 26.049283L473.287303 510.837524 80.45438 905.446907c-7.176446 7.209192-7.150864 18.871813 0.059352 26.049283 3.593851 3.577478 8.29492 5.365194 12.994965 5.365194 4.727675 0 9.455349-1.809205 13.054317-5.424546l392.715243-394.491703 392.715243 394.491703c3.599991 3.615341 8.326643 5.424546 13.054317 5.424546 4.700045 0 9.402137-1.787716 12.994965-5.365194 7.209192-7.17747 7.235798-18.84009 0.059352-26.049283L525.269211 510.837524z"
              p-id="4875"
              fill="#d81e06"
          ></path>
        </svg>
      </el-button>
      <video
          v-if="showVideo"
          :src="videoUrl"
          controls
          autoplay
          class="video"
          width="100%"
      ></video>

      <div class="mask" v-if="showProgress">
        <!-- <h4 class="tips">{{tips}}</h4> -->
        <el-button
            class="close-video"
            @click.native.stop="cancelUpload()"
            type="text"
            size="small"
        >
          <svg
              t="1622304930150"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4874"
              width="25"
              height="25"
          >
            <path
                d="M525.269211 510.837524 918.101111 116.227118c7.17747-7.209192 7.14984-18.871813-0.059352-26.049283-7.210215-7.176446-18.87079-7.151887-26.049283 0.059352L499.278257 484.72889 106.563014 90.236164c-7.17747-7.209192-18.84009-7.235798-26.049283-0.059352-7.209192 7.17747-7.235798 18.84009-0.059352 26.049283L473.287303 510.837524 80.45438 905.446907c-7.176446 7.209192-7.150864 18.871813 0.059352 26.049283 3.593851 3.577478 8.29492 5.365194 12.994965 5.365194 4.727675 0 9.455349-1.809205 13.054317-5.424546l392.715243-394.491703 392.715243 394.491703c3.599991 3.615341 8.326643 5.424546 13.054317 5.424546 4.700045 0 9.402137-1.787716 12.994965-5.365194 7.209192-7.17747 7.235798-18.84009 0.059352-26.049283L525.269211 510.837524z"
                p-id="4875"
                fill="#d81e06"
            ></path>
          </svg>
        </el-button>
        <!--进度条-->
        <el-progress
            type="line"
            :percentage="percentage"
            class="progress"
            :show-text="true"
        ></el-progress>
      </div>
      <el-table
          :data="tableData"
          height="100%"
          style="width: 100%"
          @row-click="rowClick"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <template slot="empty">
          <div>文件夹为空</div>
        </template>
        <el-table-column prop="name" label="文件名" min-width="65%">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.is_dir">
                <svg
                    t="1622278412538"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="1377"
                    height="25px"
                    width="25px"
                    style="vertical-align: middle"
                >
                  <path
                      d="M153.856 154.112H153.6a51.2 51.2 0 0 0-51.2 51.2V819.2a51.2 51.2 0 0 0 51.2 51.2h716.8a51.2 51.2 0 0 0 51.2-51.2V307.4048a51.2 51.2 0 0 0-51.4048-50.9952l-336.6912 1.3312a102.4 102.4 0 0 1-72.8064-30.0032L403.1488 170.1888a51.2 51.2 0 0 0-35.9424-15.0016l-213.3504-1.024z m0.256-51.2l213.4016 1.0752a102.4 102.4 0 0 1 71.8848 30.0032l57.4976 57.5488a51.2 51.2 0 0 0 36.4544 15.0016l336.64-1.3312A102.4 102.4 0 0 1 972.8 307.2v512a102.4 102.4 0 0 1-102.4 102.4H153.6a102.4 102.4 0 0 1-102.4-102.4V205.312a102.4 102.4 0 0 1 102.4-102.4h0.512z"
                      fill="#000000"
                      p-id="1378"
                  ></path>
                </svg>
              </span>
              <span v-else-if="isImg(scope.row.type)">
                <el-image
                    style="max-height: 50px; width: 30px; vertical-align: middle"
                    :src="filePath + scope.row.path"
                    :lazy="true"
                />

                <el-image-viewer
                    v-if="showViewer"
                    :on-close="closeViewer"
                    :url-list="[previewImgUrl]"
                />
              </span>
              <span v-else-if="isVideo(scope.row.type)">
                <svg
                    t="1622279381838"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="3069"
                    width="25px"
                    height="25px"
                    style="vertical-align: middle"
                >
                  <path
                      d="M445.528 674.616c-6.971 0-13.983-1.603-20.523-4.855-15.724-7.821-25.491-23.59-25.491-41.151V395.391c0-17.562 9.768-33.33 25.492-41.152 15.232-7.577 33.04-6.197 46.871 3.527L658.24 474.547l1.051 0.795c11.589 8.766 18.235 22.127 18.235 36.658 0 14.53-6.647 27.892-18.236 36.656l-1.051 0.795-186.363 116.783c-7.893 5.55-17.083 8.382-26.348 8.382z m13.986-253.79v182.348L605.012 512l-145.498-91.174z"
                      fill="#363F4D"
                      p-id="3070"
                  ></path>
                  <path
                      d="M803.6 873.502H220.4c-65.286 0-118.4-53.114-118.4-118.4V268.898c0-65.286 53.114-118.4 118.4-118.4h583.2c65.286 0 118.4 53.114 118.4 118.4v486.203c0 65.287-53.114 118.401-118.4 118.401zM220.4 210.498c-32.202 0-58.4 26.198-58.4 58.4v486.203c0 32.202 26.198 58.4 58.4 58.4h583.2c32.202 0 58.4-26.198 58.4-58.4V268.898c0-32.202-26.198-58.4-58.4-58.4H220.4z"
                      fill="#363F4D"
                      p-id="3071"
                  ></path>
                </svg>
              </span>
              <span v-else>
                <svg
                    t="1622279521769"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="3930"
                    width="25px"
                    height="25px"
                    style="vertical-align: middle"
                >
                  <path
                      d="M358.4 330.151724h-126.234483v-35.310345H358.4c19.42069 0 35.310345-15.889655 35.310345-35.310345V133.296552h35.310345V259.531034c0 39.017931-31.602759 70.62069-70.62069 70.62069z"
                      fill="#040000"
                      p-id="3931"
                  ></path>
                  <path
                      d="M219.642703 299.922538L398.787972 120.779034l24.967945 24.967945L244.610648 324.890483z"
                      fill="#040000"
                      p-id="3932"
                  ></path>
                  <path
                      d="M708.855172 857.158621h-423.724138c-39.017931 0-70.62069-31.602759-70.620689-70.62069V305.257931L404.126897 115.641379h304.728275c39.017931 0 70.62069 31.602759 70.62069 70.62069v600.275862c0 39.017931-31.602759 70.62069-70.62069 70.62069z m-459.034482-537.423449v466.802759c0 19.42069 15.889655 35.310345 35.310344 35.310345h423.724138c19.42069 0 35.310345-15.889655 35.310345-35.310345v-600.275862c0-19.42069-15.889655-35.310345-35.310345-35.310345H418.604138l-168.783448 168.783448z"
                      fill="#040000"
                      p-id="3933"
                  ></path>
                  <path
                      d="M672.662069 476.689655H319.558621c-9.710345 0-17.655172-7.944828-17.655173-17.655172s7.944828-17.655172 17.655173-17.655173h353.103448c9.710345 0 17.655172 7.944828 17.655172 17.655173s-7.944828 17.655172-17.655172 17.655172z"
                      fill="#040000"
                      p-id="3934"
                  ></path>
                  <path
                      d="M672.662069 335.448276H496.110345c-9.710345 0-17.655172-7.944828-17.655173-17.655173s7.944828-17.655172 17.655173-17.655172h176.551724c9.710345 0 17.655172 7.944828 17.655172 17.655172s-7.944828 17.655172-17.655172 17.655173z"
                      fill="#3A86B9"
                      p-id="3935"
                  ></path>
                  <path
                      d="M672.662069 617.931034H319.558621c-9.710345 0-17.655172-7.944828-17.655173-17.655172s7.944828-17.655172 17.655173-17.655172h353.103448c9.710345 0 17.655172 7.944828 17.655172 17.655172s-7.944828 17.655172-17.655172 17.655172z"
                      fill="#040000"
                      p-id="3936"
                  ></path>
                </svg>
              </span>
              {{ scope.row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            align="center"
            min-width="25%"
        >
          <template slot-scope="scope">
            <el-button
                v-if="scope.row.is_dir != true"
                @click.native.stop="download(scope.row.path)"
                type="text"
                size="small"
            >
              下载
            </el-button>
            <el-button
                @click.native.stop="deleteRow(scope.$index, scope.row)"
                type="text"
                size="small"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-button
          type="text"
          size="mini"
          @click="back"
          style="vertical-align: middle"
      >
        <svg
            t="1622344094306"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1931"
            width="30"
            height="30"
        >
          <path
              d="M937.9 533.5H105.1c-11.2 0-20.3-9.1-20.3-20.3 0-11.2 9.1-20.3 20.3-20.3h832.8c11.2 0 20.3 9.1 20.3 20.3 0 11.2-9.1 20.3-20.3 20.3z"
              fill="#707070"
              p-id="1932"
          ></path>
          <path
              d="M450.4 939.8c-5.6 0-11.1-2.3-15.1-6.7L69.7 526.8c-7-7.7-7-19.5 0-27.2L435.3 93.4c7.5-8.4 20.4-9 28.7-1.5s9 20.4 1.5 28.7L112.1 513.2l353.4 392.6c7.5 8.3 6.8 21.2-1.5 28.7-3.9 3.5-8.8 5.3-13.6 5.3z"
              fill="#707070"
              p-id="1933"
          ></path>
        </svg>
      </el-button>
      <el-button class="footer-button" @click.native.stop="newFolder"
      >新建文件夹
      </el-button
      >

      <el-button for="file" class="footer-button" @click="$refs.file.click()"
      >文件上传
      </el-button
      >
      <input
          style="display: none"
          type="file"
          id="file"
          name="file"
          ref="file"
          @change="beforeUpload($event)"
      />
    </el-footer>
  </el-container>
</template>

<script>
import axios from "axios";
import {getDirs} from "@/service/service";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";

export default {
  name: "FileSystem",
  components: {ElImageViewer},
  props: {
    msg: String,
  },
  data() {
    return {
      tableData: [],
      path: "",
      imgSuffix: [".jpg", ".jpeg", ".gif", "bmp", "tif", "svg", "raw", "png"],
      videoSuffix: [".mp4"],
      filePath: "/api/file?path=",
      showViewer: false,
      previewImgUrl: "",
      showVideo: false,
      videoUrl: "",
      loading: false,
      fileList: [],
      showProgress: false,
      percentage: 0,
      cancelToken:null,
    };
  },
  methods: {
    getData: function (dir) {
      this.loading = true;
      //
      getDirs(dir).then((res) => {
        this.path = dir;
        // 排序，先显示文件夹
        res.data.sort((a, b) => b.is_dir - a.is_dir);
        this.tableData = res.data;
        this.loading = false;
      });
    },
    isImg(suffix) {
      return this.imgSuffix.includes(suffix);
    },
    isVideo(suffix) {
      return this.videoSuffix.includes(suffix);
    },
    handleEdit: function (index, row) {
      console.log(index, row);
    },
    beforeUpload(event) {
      // 限制文件大小
      let size = event.target.files[0].size
      if (size > 1024 * 1024 * 1024 ) {
        this.$message.error(`上传的文件大小为:${size/1024/1024}M;超过了1G`)
        return;
      }
      // 判断文件是否已经存在
      let exist = this.tableData.filter(item =>
          !item.is_dir && item.name === event.target.files[0].name
      )
      if (exist.length > 0) {
        this.$message.error(`已存在同名文件${event.target.files[0].name}`);
        return
      }
      let fd = new FormData();
      fd.append("file", event.target.files[0]);
      fd.append("dir", this.path);
      fd.append("name", event.target.files[0].name);
      this.cancelToken = axios.CancelToken.source()
      let config = {
        onUploadProgress: (progressEvent) => {
          //progressEvent.loaded:已上传文件大小
          //progressEvent.total:被上传文件的总大小
          this.showProgress = true;
          this.percentage = (progressEvent.loaded / progressEvent.total).toFixed(2) * 100;
        },
        headers: {
          "Content-Type": "multipart/form-data",
        },
        cancelToken:this.cancelToken.token
      };
      axios
          .post("/upload", fd, config)
          .then((res) => {
            if (res.status === 200) {
              this.$message.success("上传完成");
            } else {
              this.$message.error("上传失败");
            }
            this.showProgress = false;
            this.getData(this.path);
            console.log(res);
          })
          .catch((err) => {
            this.showProgress = false;
            this.$message.error("上传失败:" + err);
          });
    },
    cancelUpload() {
      this.showProgress = false;
      if (this.cancelToken) {
        this.cancelToken.cancel("取消上传")
      }
    },
    download(dir) {
      window.location.href = `/api/download?dir=${dir}`;
    },
    deleteRow: function (index, row) {
      // console.log(index, row);
      if (row.is_dir) {
        // 查询目录是否为空
        axios.post("/is-empty", {dir: row.path}).then((res) => {
          if (res.status === 200) {
            if (res.data.data) {
              // 目录为空
              this.delete(row.path);
            } else {
              // 目录不为空,弹出确认框
              this.$confirm("该目录不为空, 是否继续删除?", "警告", {
                confirmButtonText: "删除",
                cancelButtonText: "取消",
                type: "warning",
                showClose: false,
                customClass: "confirm-box",
                closeOnClickModal: false,
              })
                  .then(() => {
                    this.delete(row.path);
                  })
                  .catch(() => {
                    this.$message({
                      type: "info",
                      message: "已取消删除",
                    });
                  });
            }
          }
        });
      } else {
        this.delete(row.path);
      }
    },
    delete: function (dir) {
      axios.post("/delete", {dir: dir}).then((res) => {
        if (res.status === 200) {
          // 删除成功
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        } else {
          // 删除失败
          this.$message.error("删除失败");
        }
        this.getData(this.path);
      });
    },
    rowClick: function (row) {
      console.log(row);
      if (row.is_dir) {
        this.getData(row.path);
      } else if (this.isImg(row.type)) {
        this.showViewer = true;
        this.previewImgUrl = this.filePath + row.path;
      } else if (this.isVideo(row.type)) {
        this.showVideo = true;
        this.videoUrl = this.filePath + row.path;
      }
    },
    newFolder() {
      this.$prompt("请输入文件夹名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showClose: false,
        customClass: "confirm-box",
        closeOnClickModal: false,
      })
          .then(({value}) => {
            let exist = this.tableData.filter(item =>
                item.is_dir && item.name === value
            )
            if (exist.length > 0) {
              this.$message.error(`已存在${value}`);
              return
            }
            axios.post("/create", {dir: this.path, name: value}).then((res) => {
              if (res.status === 200 && res.data.message === "dir already exists") {
                this.$message.error(`已经存在文件夹${value}!`);
              } else if (res.status === 200) {
                this.$message({
                  type: "success",
                  message: "创建成功!",
                });
              } else {
                this.$message.error("创建失败！");
              }
              this.getData(this.path);
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消创建",
            });
          });
    },
    upload() {
    },
    closeViewer() {
      this.showViewer = false;
    },
    closeVideo() {
      this.videoUrl = "";
      this.showVideo = false;
    },
    back: function () {
      console.log("path:", this.path);
      if (this.path === "") {
        return;
      }
      let paths = this.path.split("/");
      paths = paths.slice(0, -1);
      let temp = "";
      paths.forEach((element) => {
        if (element !== "") {
          temp += "/" + element;
        }
      });
      this.path = temp;
      this.getData(temp);
    },
  },
  beforeMount() {
    this.getData("");
  },
};
</script>

<style>
.el-container {
  width: 100%;
  height: 100%;
  padding: 0;
}

.el-table {
  margin: 0;
  margin-top: 5px;
  border: none;
}

.el-footer {
  /* background-color: #b3c0d1; */
  /* border-top: 1px solid #333; */
  color: #333;
  text-align: center;
  line-height: 50px;
  height: 50px !important;
  bottom: 0;
  display: -webkit-flex; /* Safari */
  display: flex;
  padding: 0%;
  width: 100%;
  justify-content: space-between;
}

.el-image-viewer__mask {
  opacity: 0.2;
}

.el-main {
  /* background-color: #e9eef3; */
  color: #333;
  text-align: center;
  padding: 0%;
}

.video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.close-video {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 0%;
  top: 0%;
  margin-right: 8px;
  /* transform: translate(-50%, -50%); */
  z-index: 9999;
}

.mask {
  background-color: rgb(0, 0, 0);
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
}

.progress {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.confirm-box {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.footer-button {
  flex-grow: 1;
  margin: 0%;
  border: none;
}
</style>
